import PropTypes from "prop-types"
import React, { memo, useRef, useState } from "react"
import { ItemWrapper } from "./style"
import { Rating } from "@mui/material"
import { Carousel } from "antd"
import IconArrowLeft from "@/assets/svg/icon-arrow-left"
import IconArrowRight from "@/assets/svg/icon-arrow-right"
import Indicator from "@/base-ui/indicator"
import classNames from "classnames"

const RoomItem = memo((props) => {
    const swiperRef = useRef()
    const [selectIndex, setSelectIndex] = useState(0)
    const { itemData, itemWidth = "25%", itemClick } = props
    /** 事件处理逻辑 */
    function controlClickHandle(e, isNext = true) {
        isNext ? swiperRef.current.next() : swiperRef.current.prev()
        let newIndex = isNext ? selectIndex + 1 : selectIndex - 1
        // 判断特殊情况 第一个再次点击时
        if (newIndex < 0) newIndex = itemData.picture_urls.length - 1
        // 最后一个再次点击时
        if (newIndex > itemData.picture_urls.length - 1) newIndex = 0
        setSelectIndex(newIndex)

        e.stopPropagation()
    }

    function itemClickHandle() {
        if (itemClick) itemClick(itemData)
    }

    // 子元素赋值
    const pictureElement = (
        <div className="cover">
            <img src={itemData.picture_url} alt="" />
        </div>
    )
    const sliderElement = (
        <div className="slider">
            <div className="control">
                <div className="left btn" onClick={(e) => controlClickHandle(e, false)}>
                    <IconArrowLeft width="24" height="24" />
                </div>
                <div className="btn right" onClick={(e) => controlClickHandle(e, true)}>
                    <IconArrowRight width="24" height="24" />
                </div>
            </div>
            <div className="indicator">
                <Indicator selectIndex={selectIndex}>
                    {itemData?.picture_urls?.map((item, index) => {
                        return (
                            <div className="dot-item" key={item}>
                                <span
                                    className={classNames("dot", {
                                        active: selectIndex === index,
                                    })}
                                ></span>
                            </div>
                        )
                    })}
                </Indicator>
            </div>

            <Carousel dots={false} ref={swiperRef}>
                {itemData?.picture_urls?.map((item) => (
                    <div className="cover" key={item}>
                        <img src={item} alt="" />
                    </div>
                ))}
            </Carousel>
        </div>
    )

    return (
        <ItemWrapper
            $verifyColor={itemData?.verify_info?.text_color || "#39576a"}
            $itemWidth={itemWidth}
            onClick={itemClickHandle}
        >
            <div className="inner">
                {!itemData.picture_urls ? pictureElement : sliderElement}

                <div className="desc">{itemData.verify_info.messages?.join("·")}</div>
                <div className="name">{itemData.name}</div>
                <div className="price">￥{itemData.price}/晚</div>
                <div className="bottom">
                    <Rating
                        value={itemData.star_rating ?? 5}
                        precision={0.5}
                        readOnly
                        sx={{ fontSize: "12px", color: "#00848A", marginRight: "-1px" }}
                    />
                    <span className="count">{itemData.reviews_count}</span>
                    <span className="extra">{itemData.bottom_info?.content}</span>
                </div>
            </div>
        </ItemWrapper>
    )
})

RoomItem.propTypes = {
    itemData: PropTypes.object,
}

export default RoomItem
